<template>
    <div class="approve-detail-container">
      <header-top title="审批"/>
      <div class="approve">
        <div class="g-title">审批结果</div>
        <div>
            <van-button plain size="small" :type="btnStatus == 'pass' ? 'info' : 'default'" style="margin-right: 10px" @click="handleType('pass')">通过</van-button>
            <van-button plain size="small" :type="btnStatus == 'reject' ? 'info' : 'default'" @click="handleType('reject')">不通过</van-button>
        </div>
      </div>
      <div class="approve">
        <div class="g-title">审批备注</div>
        <div style="display: flex;">
            <textarea class="textarea" v-model="approveRemark" placeholder="请输入内容" maxlength="250"></textarea>
        </div>
      </div>
      <div class="approve" v-if="approveResult == 'pass' && nextUserList.length">
        <div class="g-title">下级审批人</div>
        <div>
            <van-button v-for="(it, i) in nextUserList" :key="'it' + i" plain size="small" :type="currentUserIndex === i ? 'info' : 'default'" style="margin-right: 10px" @click="handleUser(it, i)">{{it.username}}</van-button>
        </div>
      </div>
      <van-overlay
        :show="loading"
        :custom-style="{
            display: 'flex',
            justifyContent: 'center',
            paddingTop: '100px'
        }"
        >
      <van-loading size="24px" color="#4994df">
        <span style="color:#4994df">{{ '加载中···' }}</span>
      </van-loading>
    </van-overlay>
      <div class="bottom fixed-bottom">
        <van-button class="v-btn" type="info" @click="goApprove">提交</van-button>
      </div>
    </div>
  </template>
  <script>
  import HeaderTop from '../components/HeaderTop'
  import { getFlowDetail, getFileList, getFlowuser, getflowSub } from "../api";
  import { Toast, Dialog } from 'vant';
  // import { Toast } from 'vant';
  
  export default {
    data() {
      return {
        loading: !1,
        btnStatus: 'default',
        approveResult: '', // pass通过 fail不通过
        currentNextUser: '' ,// 选中下级审批人
        currentUserIndex: '',
        approveRemark: '', // 备注
        params: {
            id: '',
            tablename: ''
        },
        nextUserList: [],
        sysKey: '',
        statusName: ['待提交', '审批中', '审批未通过', '审批通过'],
        projectInfo: {
          id: '',
          'tableName': '',
          'processId': '',
          'jbr': '',
          'createTime': '',
          'isCur': '',
          'status': '',
          columnname: '',
          columnList: []
        },
        filesList: [],
        meetingList: [],
        fileListMul: [],
        filesInfo: [],
        sysName: '',
      }
    },
    mounted() {
      this.params.id = this.$route.query.id
      this.params.tablename = this.$route.query.tablename
      this.getNextFlowuser()
    },
    methods: {
        handleType(type) {
            this.btnStatus = type
            this.approveResult = type
        },
        handleUser(it, i) {
            console.log(it)
            this.currentNextUser = it
            this.currentUserIndex = i
        },
        getNextFlowuser() {
            const token = localStorage.getItem('zzdToken')
            getFlowuser(this.params, token).then(res => {
                if(res.data.code === 1) {
                    this.nextUserList = res.data.dataList
                }
            })
        },
      getDetail() {
        const token = localStorage.getItem('zzdToken')
        getFlowDetail({
          id: this.$route.query.id,
          tablename: this.$route.query.tablename
        }, token).then(res => {
          // console.log("数据", data)
          if (res.data.code === 1) {
            this.projectInfo = res.data.dataList[0]
            const columnList = res.data.dataList[0].columnList.slice()
            this.projectInfo.columnList = columnList.filter(item => item.type !== 'file')
            this.projectInfo.columnFileList = columnList.filter(item => item.type === 'file')
            this.getFiles()
            this.getMeetings(1)
          }
        })
      },
      getFiles(name = '') {
        const fileParams = {
          columnname: name || '',
          ...this.params
        }
        const token = localStorage.getItem('zzdToken')
        getFileList(fileParams, token).then(res => {
          if (res.data.code === 1) {
            this.filesList = res.data.dataList.slice()
          }
        })
      },
      getMeetings() {
        const fileParams = {
          columnname: 1,
          ...this.params
        }
        const token = localStorage.getItem('zzdToken')
        getFileList(fileParams, token).then(res => {
          if (res.data.code === 1) {
            this.meetingList = res.data.dataList.slice()
          }
        })
      },
      goApprove() {
        if (!this.approveResult) {
            Toast('请选择审批结果')
            return false
        }
        if (this.approveResult === 'pass' && this.nextUserList.length && !this.currentNextUser ) {
            Toast('请选择下级审批人')
            return false
        }
        if ( this.approveResult === 'reject' && !this.approveRemark ) {
            Toast('请选择输入审批备注')
            return false
        }

        const params = {
            ...this.params,
            userId: this.currentNextUser.userid,
            remark: this.approveRemark,
            result: this.approveResult === 'pass' ? 1 : 2,
        }
        const token = localStorage.getItem('zzdToken')
        this.loading = !0
        getflowSub(params, token).then(res => {
            if (res.data.code === 1 && res.data.isSuccess) {
                Dialog.alert({
                    message: '提交成功',
                }).then(() => {
                    this.$router.replace({
                    path: '/',
                });
                });
                
            } else {
                Toast(res.data.msg)
            }
            this.loading = false
        })
      },
      backClose(done) {
        done()
      },
    },
    components:{
        HeaderTop
    }
  }
  </script>
  <style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../common/stylus/mixin.styl';
  </style>
  
  <style lang="scss" scoped>
  .approve-detail-container {
    width: 100%;
    background-color: rgba(247, 248, 252, 1);
    padding-bottom: 25px;
    min-height: 100vh;
    .approve {
      padding: 12px;
      background-color: #fff;
      margin-bottom: 20px;
      .textarea {
        border: 1px solid #eee;
        padding: 5px;
        height: 150px;
        resize: none;
        width: 100%;
        border-radius: 5px;
        margin: 5px;
        font-size: 12px;
      }
      .item {
        padding: 0 15px;
        font-size: 14px;
        border: 1px solid #eee;
        text-align: center;
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        height: 44px;
        margin: 0;
        padding: 0;
        font-size: 16px;
        line-height: 1.2;
        text-align: center;
        border-radius: 2px;
        cursor: pointer;
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
        -webkit-appearance: none;
      }
    }
    .top {
      background-color: #fff;
      padding: 0 15px;
      .status-span {
        display: block;
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid rgba(224, 224, 224, 1);
      }
      .info-wrap {
        margin-bottom: 10px;
        .label-span {
          display: flex;
          padding: 5px 0;
          justify-content: space-between;
          .label {
            font-weight: 400;
            color: rgba(158, 166, 177, 1);
          }
        }
      }
    }
  
    .g-title {
      border-left: 5px solid #2982de;
      padding-left: 12px;
      margin-bottom: 10px;
    }
    .table-wrap {
      margin-bottom: 10px;
      padding: 0 15px;
      background-color: #fff;
      .uni-list-item__content {
        flex: 1 0 30% !important;
        color: rgba(158, 166, 177, 1);
      }
      .right-span {
        color: #333;
      }
    }
    .files-wrap {
      padding: 0 15px;
      margin-bottom: 10px;
      background-color: #fff;
      // display: flex;
      .file-link-card {
        display: flex;
        height: 40px;
        padding: 15px 14px;
        background: #ffffff;
        border-radius: 4px;
        margin-top: 16px;
        margin-bottom: 3px;
        .file-img {
          background-image: url("../assets/tabbar/file_icon.jpg");
          background-repeat: no-repeat;
          background-size: contain;
          width: 40px;
          height: 40px;
        }
        .file-link {
          height: 40px;
          font-size: 14px;
          color: #2b518a;
          text-align: left;
          margin-left: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 80%;
        }
      }
    }
    .bottom {
      width: 100%;
      display: flex;
      &.fixed-bottom {
        position: fixed;
        bottom: 0;
      }
      .v-btn {
        flex: 1;
      }
      .log-btn {
        border-radius: 0;
        background-color: #fff;
        color: #333;
      }
    }
  }
  .uni-list-item {
    .uni-list-item__extra-span {
      text-align: right;
    }
  }
  .list-info {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e3e3e5;
    .leftspan {
      flex: 1;
      font-size: 14px;
      padding-left: 15px;
    }
    .rightspan {
      width: 110px;
      color: #999;
      font-size: 12px;
    }
  }
  .status-1 {
    color: rgba(158, 166, 177, 1);
  }
  .status-2 {
    color: rgba(247, 192, 24, 1);
  }
  .status-3 {
    color: rgba(190, 13, 34, 1);
  }
  .status-4 {
    color: rgba(19, 112, 14, 1);
  }
  </style>
  